<script setup>

  import { computed, reactive, ref } from 'vue';

  import {
    onReachBottom
  } from '@dcloudio/uni-app';
  import businessScrollList from '@/sheep/businessCom/business-scroll-list.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';
  import rankingHotItem from '@/sheep/businessCom/pages/ranking-hot-item.vue';


  const src = ref('https://www.zhangfkj.cn/zfkj/14_a936f483-43a4-4f53-989b-94b6a1feb91bWechatIMG126.png');

  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);

  const state = reactive({
    showModal: false,
    bottomListActive:0,
    searchParam:{
      name:'疯抢排行'
    }
  });


  // #ifdef H5
  const navbar = 'none';
  // #endif
  // #ifdef MP
  const navbar = 'custom';
  // #endif
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
  });
</script>

<template>
  <s-layout
title="首页" :navbar="navbar" tabbar="/pages/index/ranking" :bgStyle="template.page"
            :navbarStyle="template.navigationBar" onShareAppMessage>
    <view class="header uno-relative">
      <up-image :show-loading="true" :src="src" width="100%" height="320px" @click="click"/>
    </view>


  <view class="uno-p-2" style="margin-top:-50rpx">
    <businessScrollList :params="state.searchParam" :col="1">
      <template #default="{item ,index}">
        <rankingHotItem :model-value="item"  :index="index" @click="sheep.$router.go('/pages/goods/index',{id:item.id})"/>
      </template>
    </businessScrollList>
  </view>
  </s-layout>
</template>

<style scoped lang="scss">
  :deep(.page-body){
    background: #f5f5f5!important;
  }
.header{
  position: relative;
  height: 350rpx;
}
</style>